<template>
	<view style="position: relative;" :style="'width:'+styleObj['width']+';height:'+styleObj['height']+';border-radius:'+styleObj['borderRadius']">
		<swiper @change="indicatorChange" :style="'width:'+styleObj['width']+';height:'+styleObj['height']+';border-radius:'+styleObj['borderRadius']" autoplay="true">
			<swiper-item :style="'width:'+styleObj['width']+';height:'+styleObj['height']+';border-radius:'+styleObj['borderRadius']" :item-id="item.id" v-for="(item,index) in list" :key="item.id">
				<image mode="widthFix" :style="'width:'+styleObj['width']+';height:'+styleObj['height']+';border-radius:'+styleObj['borderRadius']" :src="item.url"></image>
			</swiper-item>
		</swiper>
		<view class="indicator">
			<view class="iconfont icon-tupian"></view>
			<view class="num">{{current}}/{{list.length}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Swiper',
		props: {
			styleObj: {
				type: Object,
				default () {
					return {
						width: '100%',
						height: '100%',
						borderRadius: '20rpx'
					}
				}
			},
			list: Array
		},
		data() {
			return {
				current:1,
			}
		},
		methods:{
			indicatorChange(e){
				this.current=e.detail.current+1;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indicator{
		position: absolute;
		right: 20rpx;
		bottom: 50rpx;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding:4rpx 20rpx;
		.iconfont{
			color: #fff;
			font-size: 30rpx;
			margin-right: 10rpx;
		}
		.num{
			color: #fff;
			font-size: 28rpx;
		}
	}
</style>
